<template>
  <div class="promote">
    <div class="hader-top" @click="tiaozhuan">
      <span><el-icon><Back /></el-icon></span>
      <span style="margin-left: 5px;">标签建群</span>
    </div>
    <div style="margin: 10px;padding: 15px;background-color: #fff;">
      <div style="background-color: #FFF7E3;color: #AD4E00;padding: 15px;">
        <el-icon style="color: #FF8F16;"><BellFilled /></el-icon>
        <span>每位客户每天可以接收1条群发消息，不限企业发布的群发还是个人发布的群发。达到上限后，无法再接收管理员的群发消息</span>
      </div>
      <div style="font-size: 20px;font-weight: 700;border-bottom: 2px solid #eee;padding-bottom: 10px;margin-top: 15px;">
        基础信息
      </div>
      <div style="margin-top: 20px;">
        <el-form :model="form" label-width="120px">
          <el-form-item label="任务名称：">
            <el-input v-model="form.name" style="width: 210px;" />
          </el-form-item>
          <el-form-item label="选择群发账号：">
            <el-select v-model="form.staffs" multiple class="m-2" placeholder="Select" size="large" @click="saffidapi()">
              <el-option
                v-for="item in staffslist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="筛选客户：">
            <el-radio-group v-model="form.type" class="ml-4">
              <el-radio :label="1" size="large">筛选客户</el-radio>
              <el-radio :label="2" size="large">全部客户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.type == 1">
            <div style="background-color: #FBFBFB;padding: 20px;">
              <div style="padding-left: 10px;border-bottom: 1px solid #eee;padding-bottom: 15px;">
                筛选客户
              </div>
              <div style="margin-top: 15px;">
                <el-form :model="form" label-width="120px">
                  <el-form-item label="性别：">
                    <el-radio-group v-model="form.gender" class="ml-4">
                      <el-radio :label="1" size="large">全部性别</el-radio>
                      <el-radio :label="2" size="large">仅男性粉丝</el-radio>
                      <el-radio :label="3" size="large">仅女性粉丝</el-radio>
                      <el-radio :label="4" size="large">未知性别</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="添加时间：" style="margin-top: 15px;">
                    <el-date-picker
                      v-model="form.time"
                      type="daterange"
                      range-separator="To"
                      start-placeholder="Start date"
                      end-placeholder="End date"
                      :size="size"
                    />
                  </el-form-item>
                  <el-form-item label="标签：" style="margin-top: 15px;">
                    <el-select v-model="form.tags" multiple class="m-2" placeholder="Select" size="large" @click="tagsapi">
                      <el-option
                        v-for="item in taglist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        :size="size"
                      />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div style="font-size: 20px;font-weight: 700;border-bottom: 2px solid #eee;padding-bottom: 10px;margin-top: 15px;">
        设置群消息
      </div>
      <div style="padding-top: 15px;">
        <div style="display: inline-block;width: 60%;">
          <el-form :model="form" label-width="120px">
          <el-form-item label="入群引导语：">
            <el-input
              v-model="form.text_content"
              :rows="10"
              type="textarea"
              placeholder="Please input"
            />
          </el-form-item>
          <el-form-item label="群聊：">
            <el-button type="primary" @click="editsopapi"><el-icon><Plus /></el-icon>选择群聊</el-button>
          </el-form-item>
          <el-form-item >
            <div>
              <el-tag v-for="item in form.group_list" style="margin-right: 5px;">{{ item.name }}</el-tag>
            </div>
          </el-form-item>
          <el-form-item label="过滤客户：">
            <el-switch
              v-model="form.filter"
              
              :active-value="1"
              :inactive-value="2"
            />
            <div style="display: block;width: 100%;">开启后已在群聊中的客户将不会收到邀请</div>
          </el-form-item>
        </el-form>
        </div>
        <div>
          <el-button type="primary" @click="addapi">通知成员发送邀请</el-button>
        </div>
      </div>
    </div>
    <ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue"></ChooseDialogue>
    <labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
    <groupchats ref="editData" :groupchatapi="groupchatapi"></groupchats>
  </div>
</template>
<script setup>
import { ref, onBeforeMount,reactive } from 'vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import labels from '@/components/app/label.vue'
import groupchats from '@/components/app/groupchat.vue'
import { postcolonizationadd } from '@/api'
import { useRouter } from 'vue-router'
const chooseDialogue = ref()
const TestRef = ref()
const dialogVisible = ref(false)
const staffslist =ref()
const editData=ref()
const router = useRouter()
const form = reactive({
  group_list:[],
  name:'',
  text_content:'',
  type:1,
  staffs:[],
  tags:[],
  time:'',
  gender:1,
  filter:'1'
})
const taglist=ref()
const getChooseData = (val) => {
  console.log(val)
  staffslist.value=val
  form.staffs=[]
  for(var i = 0;i< staffslist.value.length;i++){
    form.staffs.push(staffslist.value[i].id)
  }
}
const saffidapi=()=>{
  chooseDialogue.value.show('staff')
}
const labeldataapi = (val)=>{
  console.log(val)
  form.tags=val.id
  taglist.value=val.list
}
const tagsapi = ()=>{
  var data = {
    show:true,
    type:1,
	title:'标签',
	tips:'请选择要添加的标签',
	tipsshow:true,
  }
	TestRef.value.tableshow(data)
}
const editsopapi = (val) => {
	var data = {
		show: true,
		id: val,
		name: val.name
	}
	editData.value.addapi(data)
}
const groupchatapi=(val)=>{
  console.log(val)
  form.group_list=val
}
const addapi=()=>{
  console.log(form)
  postcolonizationadd(form).then(res=>{
    ElMessage({
      message:res.msg,
      type: 'success',
    })
    router.push('building')
  })
}
const tiaozhuan=()=>{
  router.push('building')
}
</script>
<style>
.promote{
  /* padding: 20px; */
}
.hader-top{
  font-size: 16px;
  font-weight: 600;
  background-color: #fff;
  padding: 10px;
}
</style>